
<div class="mod-monitor monitor-manage">
  <loading ng-if="loadingsIns.isLoading"></loading>
  <div class="monitor-options">
    <div class="monitor-option"><span class="option-title">集群</span>
      <div class="com-select-con" select-con="select-con">
        <button class="ui-btn ui-btn-white ui-btn-select" sg-cloak="sg-cloak">{{clusterListIns.cluster.name||'选择集群'}}<i class="icon-down"></i></button>
        <ul class="select-list">
          <li class="select-item" ng-if="!clusterListIns.clusterList || clusterListIns.clusterList.length===0"><a>无相关信息</a></li>
          <li class="select-item" ng-repeat="cluster in clusterListIns.clusterList"><a ng-bind="cluster.name" ng-click="toggleCluster($index)"></a></li>
        </ul>
      </div>
    </div>
    <div class="monitor-option"><span class="option-title">资源类型</span>
      <div class="com-select-con" select-con="select-con">
        <button class="ui-btn ui-btn-white ui-btn-select" ng-cloak="ng-cloak">{{monitorType}}<i class="icon-down"></i></button>
        <ul class="select-list">
          <li class="select-item"><a ng-click="toggleMonitorType('主机')">主机</a></li>
          <li class="select-item"><a ng-click="toggleMonitorType('pod')">pod</a></li>
        </ul>
      </div>
    </div>
    
    <div class="monitor-line" ng-if="monitorType=='pod'"><span class="option-titleName">pod名称搜索</span>
      <div class="com-select-con host-label" select-con="select-con">
        <input class="ui-input-search ui-input-fill ui-btn-select input-btn-size" placeholder="{{deployListIns.deploy.name?'当前选择：'+deployListIns.deploy.name:'搜索pod'}}" ng-model="keywords.podName"/>
        <ul class="select-list">
          <li class="select-item" ng-if="!podFiltered.length===0"><a>无相关pod</a></li>
          <li class="select-item" ng-repeat="pod in podFiltered=(podResource| filter:{'podname': keywords.podName})"><a ng-click="filterPod(pod.podname);"><span ng-cloark="ng-cloark">{{pod.podname}}</span></a></li>
        </ul>
      </div>
    </div>
    <div class="monitor-line" ng-if="monitorType=='pod'"><span class="option-titleName">podIP搜索</span>
      <div class="com-select-con host-label" select-con="select-con">
        <input class="ui-input-search ui-input-fill ui-btn-select input-btn-size" placeholder="{{deployListIns.deploy.name?'当前选择：'+deployListIns.deploy.name:'搜索podIP'}}" ng-model="keywords.podIP"/>
        <ul class="select-list">
          <li class="select-item" ng-if="!podFiltered.length===0"><a>无相关pod</a></li>
          <li class="select-item" ng-repeat="pod in podFiltered=(podResource| filter:{'ip': keywords.podIP})"><a ng-click="filterPodByIP(pod.ip);"><span ng-cloark="ng-cloark">{{pod.ip}}</span></a></li>
        </ul>
      </div>
    </div>
    <div class="monitor-line" ng-if="monitorType=='主机'"><span class="option-title">主机名称</span>
      <div class="com-select-con host-label" select-con="select-con">
        <input class="ui-input-search ui-input-fill ui-btn-select input-btn-size" placeholder="{{deployListIns.deploy.name?'当前选择：'+deployListIns.deploy.name:'搜索主机'}}" ng-model="keywords.hostName"/>
        <ul class="select-list">
          <li class="select-item" ng-if="hostFiltered.length===0"><a>无相关主机</a></li>
          <li class="select-item" ng-repeat="host in hostFiltered=(hostResource|filter:{'nodename': keywords.hostName})"><a ng-click="filterHost(host.nodename)"><span ng-cloark="ng-cloark">{{host.nodename}}</span></a></li>
        </ul>
      </div>
    </div>
    <!--
    <div class="monitor-line" ng-if="monitorType=='主机'"><span class="option-title">主机名称</span>
      <div class="ui-input-white com-select-con host-label" label="true" select-con="select-con">
        <ul class="selected-labels">
          <li class="select-label" ng-repeat="host in hostFiltered=(hostResource|filter:{'nodename': keywords.hostName})" ng-cloak="ng-cloak"><a class="icon-cancle icon-cancle-former" ng-click="nodeListIns.toggleLabel(label,false)"></a>{{host.nodename}}</li>
          <li class="select-input">
            <input class="line-element ui-btn-select" placeholder="选择主机名称" ng-model="keywords.hostName" ng-keydown="labelKeyDown($event,labelKey.key,labelsInfoFiltered)"/>
          </li>
        </ul>
        <ul class="select-list">
          <li class="select-item" ng-if="Object.keys(labelsInfoFiltered).length===0"><a>无相关信息</a></li>
          <li class="select-item" ng-repeat="(label,value) in labelsInfoFiltered=(nodeListIns.labelsInfo| searchKey:labelKey.key|search:'isShow':true)"><a ng-bind="label" ng-click="nodeListIns.toggleLabel(label,true);labelKey.key=''"></a></li>
        </ul>
      </div>
    </div>
    -->
  </div>
  <div class="mod-list">
    <table class="ui-table-dome" ng-if="monitorType=='主机'">
      <thead ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false">
        <tr>
          <th><span><label for="checkAllNode"></label></span>主机名称</th>
          <th class="tool-enable-click" ng-click="toggleOrderBy('node','cpuused')" ng-class="{'active':orderBy.node=='cpuused'}">CPU使用<i class="icon-order" ng-show="orderBy.node!='cpuused'"></i><i class="icon-down" ng-show="orderBy.node=='cpuused'" ng-class="{'up':!orderBy.isReverse}"></i></th>
          <th class="tool-enable-click" ng-click="toggleOrderBy('node','cpuall')" ng-class="{'active':orderBy.node=='cpuall'}">CPU总数<i class="icon-order" ng-show="orderBy.node!='cpuall'"></i><i class="icon-down" ng-show="orderBy.node=='cpuall'" ng-class="{'up':!orderBy.isReverse}"></i></th>
          <th class="tool-enable-click" ng-click="toggleOrderBy('node','memoryused')" ng-class="{'active':orderBy.node=='memoryused'}">内存使用<i class="icon-order" ng-show="orderBy.node!='memoryused'"></i><i class="icon-down" ng-show="orderBy.node=='memoryused'" ng-class="{'up':!orderBy.isReverse}"></i></th>
          <th class="tool-enable-click" ng-click="toggleOrderBy('node','memoryall')" ng-class="{'active':orderBy.node=='memoryall'}">内存总数<i class="icon-order" ng-show="orderBy.node!='memoryall'"></i><i class="icon-down" ng-show="orderBy.node=='memoryall'" ng-class="{'up':!orderBy.isReverse}"></i></th>
          <th class="tool-enable-click" ng-click="toggleOrderBy('node','podused')" ng-class="{'active':orderBy.node=='podused'}">pod使用占比（个数）<i class="icon-order" ng-show="orderBy.node!='podused'"></i><i class="icon-down" ng-show="orderBy.node=='podused'" ng-class="{'up':!orderBy.isReverse}"></i></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-if="filteredNodes.length===0">
          <td colspan="9">无主机信息</td>
        </tr>
        <tr ng-repeat="node in filteredNodes=(keywords.hostName == '' || keywords.hostName == null?hostResource:filterHostNameList|orderBy:orderBy.node:orderBy.isReverse)">
          <td ng-cloak="ng-cloak">{{node.nodename}}</td>
          <td ng-cloak="ng-cloak">{{node.cpuused /1000 }} 核</td>
          <td ng-cloak="ng-cloak">{{node.cpuall / 1000}} 核</td>
          <td ng-cloak="ng-cloak">{{node.memoryused / 1000}} G</td>
          <td ng-cloak="ng-cloak">{{node.memoryall / 1000}}G</td>
          <td ng-cloak="ng-cloak" >{{node.podused}}/{{node.podall}}</td>
          
        </tr>
      </tbody>
    </table>
    <table class="ui-table-dome" ng-if="monitorType=='pod'">
      <thead ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false">
        <tr>
          <th class="tool-enable-click" ng-click="toggleOrderBy('pod','podname')" ng-class="{'active':orderBy.pod=='podname'}">pod名称<i class="icon-order" ng-show="orderBy.pod!='podname'"></i><i class="icon-down" ng-show="orderBy.pod=='podname'" ng-class="{'up':!orderBy.isReverse}"></i></th>
          <th class="tool-enable-click" ng-click="toggleOrderBy('pod','ip')" ng-class="{'active':orderBy.pod=='ip'}">pod IP<i class="icon-order" ng-show="orderBy.pod!='ip'"></i><i class="icon-down" ng-show="orderBy.pod=='ip'" ng-class="{'up':!orderBy.isReverse}"></i></th>
          <th class="tool-enable-click" ng-click="toggleOrderBy('pod','nodename')" ng-class="{'active':orderBy.pod=='nodename'}">主机名称<i class="icon-order" ng-show="orderBy.pod!='nodename'"></i><i class="icon-down" ng-show="orderBy.pod=='nodename'" ng-class="{'up':!orderBy.isReverse}"></i></th>
          <th>cpu大小</th>
          <th>内存大小</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-if="!filteredPods.length===0">
          <td colspan="6">无组件信息</td>
        </tr>
        <tr ng-repeat="pod in filteredPods=((keywords.podIP == '' || keywords.podIP == null) && (keywords.podName == '' || keywords.podName == null)  ?podResource:filterPodList|orderBy:orderBy.pod:orderBy.isReverse)">
          <td ng-cloak="ng-cloak">{{pod.podname}}</td>
          <td ng-cloak="ng-cloak">{{pod.ip}}</td>
          <td ng-cloak="ng-cloak">{{pod.nodename}}</td>
          <td ng-cloak="ng-cloak" ng-if="pod.resource.cpu !==0">{{pod.resource.cpu / 1000}}核</td>
          <td ng-cloak="ng-cloak" ng-if="pod.resource.cpu ===0">无限制</td>
          <td ng-cloak="ng-cloak" ng-if="pod.resource.memory / 1024 >=1">{{pod.resource.memory / 1024 }}G</td>
          <td ng-cloak="ng-cloak" ng-if="pod.resource.memory / 1024 <1 && pod.resource.memory / 1024 > 0">{{pod.resource.memory}}M</td>
          <td ng-cloak="ng-cloak" ng-if="pod.resource.memory / 1024 === 0">无限制</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>